<script setup lang="ts">
	import { ref } from "vue";
	import { formRules } from "./utils/rule";
	import { FormProps } from "./utils/types";
	import ReCol from "@/components/ReCol";
	import { useCorps } from "./utils/hook";
	const props = withDefaults(defineProps<FormProps>(), {
		formInline: () => ({
			title: "",
			status: 0,
			Id: 0,
			higherDeptOptions: [],
			roleIdsOptions: [],
			parentId: 0
		})
	});
	const ruleFormRef = ref();
	const newFormInline = ref(props.formInline);

	function getRef() {
		return ruleFormRef.value;
	}
	defineExpose({ getRef });
	const {
		genderOptions,
		statusOptions,
		isSuperAdminOptions,
		jobSelectOptions,
	} = useCorps();
</script>

<template>
	<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="auto">
		<el-row :gutter="30">
			<re-col :value="12" :xs="24" :sm="24">
				<!-- <el-form-item label="部分ID" prop="departmentId">
					<el-input v-model="newFormInline.departmentId" clearable placeholder="请输入部分ID" />
					
				</el-form-item> -->
				
				<el-form-item label="归属部门">
				  <el-cascader
					v-model="newFormInline.departmentId"
					class="w-full"
					:options="newFormInline.higherDeptOptions"
					:props="{
					  value: 'id',
					  label: 'name',
					  emitPath: false,
					  checkStrictly: true
					}"
					clearable
					filterable
					placeholder="请选择归属部门"
				  >
					<template #default="{ node, data }">
					  <span>{{ data.name }}</span>
					  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
					</template>
				  </el-cascader>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="newFormInline.username" clearable placeholder="请输入用户名" />
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="密码" :prop="newFormInline.title ==='新增'?'password':''">
					<el-input v-model="newFormInline.password" clearable placeholder="密码格式应为6-8位数字、字母、符号的任意两种组合" maxlength="8"/>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="newFormInline.name" clearable placeholder="请输入姓名" />
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="入职时间" prop="entryDate">
					<el-date-picker
						v-model="newFormInline.entryDate"
						type="date"
						placeholder="请选择入职时间"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						style="width: 100%;"
					/>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="电话" prop="phone">
					<el-input v-model="newFormInline.phone" clearable placeholder="请输入电话" 
					type="number"
					class="no_number"
					oninput="if(value.length>11)value=value.slice(0,11)"/>
				</el-form-item>
			</re-col>
			
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="newFormInline.email" clearable placeholder="请输入邮箱" />
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<!-- <el-form-item label="职位ID" prop="jobTitleId">
					<el-input v-model="newFormInline.jobTitleId" clearable placeholder="请输入职位ID" />
				</el-form-item> -->
				<el-form-item label="职位" prop="jobTitleId">
				  <el-select
				    v-model="newFormInline.jobTitleId"
				    placeholder="请选择职位"
				    class="w-full"
				    clearable
				  >
				    <el-option
				      v-for="(item, index) in jobSelectOptions"
				      :key="index"
				      :label="item.name"
				      :value="item.jobTitleId"
				    />
				  </el-select>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="性别" prop="gender">
				  <el-select
				    v-model="newFormInline.gender"
				    placeholder="请选择性别"
				    class="w-full"
				    clearable
				  >
				    <el-option
				      v-for="(item, index) in genderOptions"
				      :key="index"
				      :label="item.name"
				      :value="item.id"
				    />
				  </el-select>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="状态" prop="status">
				  <el-select
				    v-model="newFormInline.status"
				    placeholder="请选择状态"
				    class="w-full"
				    clearable
				  >
				    <el-option
				      v-for="(item, index) in statusOptions"
				      :key="index"
				      :label="item.name"
				      :value="item.id"
				    />
				  </el-select>
				</el-form-item>
			</re-col>
			
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="超级管理员" prop="isSuperAdmin">
				  <el-select
				    v-model="newFormInline.isSuperAdmin"
				    placeholder="请选择是否为超级管理员"
				    class="w-full"
				    clearable
				  >
				    <el-option
				      v-for="(item, index) in isSuperAdminOptions"
				      :key="index"
				      :label="item.name"
				      :value="item.id"
				    />
				  </el-select>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="角色" prop="roleIds" v-if="!newFormInline.isSuperAdmin">
				  <el-select
				    v-model="newFormInline.roleIds"
				    placeholder="请选择角色"
				    class="w-full"
				    clearable
					multiple
					:multiple-limit="1"
				  >
				    <el-option
				      v-for="(item, index) in newFormInline.roleIdsOptions"
				      :key="index"
				      :label="item.name"
				      :value="item.roleId"
				    />
				  </el-select>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="备注" prop="remarks">
					<el-input v-model="newFormInline.remarks" clearable placeholder="请输入备注" />
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>
<style scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}
</style>